<template>
    <div class="adderss-box">
        <!-- 使用van-list -->
       <van-list :finished="finished"   @load="listRoll" :offset="offset" :immediate-check="isCheck"  v-show="data.length>0">
            <!-- 地址列表 -->
            <div class="list" v-for="(item,index) in data" :key="index">
                <!-- top -->
                <dl  @click="tabs(index)">
                    <dt>{{item.name}} &nbsp;&nbsp; {{item.mobile}}</dt>
                    <dd>{{item.province}}{{item.city}}{{item.district}}{{item.address}}</dd>
                </dl>
                <div class="bottom">
                    <div class="left" @click="selected(index,item.id)">
                        <i :class="{active:index ==checked}"></i> 
                        <span v-if="lang=='zh' ">默认地址</span> 
                        <span v-else >default address</span>   
                    </div>
                    <div class="btn-box">
                        <span v-if="lang=='zh' " class="edit" @click="Edit(index)">编辑</span>
                        <span v-else class="edit" @click="Edit(index)">eidt</span>
                        <span v-if="lang=='zh' " class="delete" @click="Delete(item.id)">删除</span>
                        <span v-else class="delete" @click="Delete(item.id)">delete</span>
                    </div>
                </div>
            </div>
        </van-list>
        <div class="noadderss-box" v-show="data.length<=0">
            <img src="http://img.xianyufanshen.net//goods/image/zanwushouhuodizhi@2x.png" alt="">
            <p  v-if="lang=='zh' "  >您还没有收货地址，快去添加吧~</p>
            <p v-else >You don't have a shipping address yet, go add it~</p>
            <div  v-if="lang=='zh' "  class="btn-add" @click="addAddress">新增地址</div>
            <div  v-else   class="btn" @click="addAddress">Add address</div>
        </div>
        <!-- 操作按钮 -->
        <div   v-show="data.length>0" v-if="lang=='zh' " class="btn" @click="addAddress">添加新地址</div>
        <div  v-show="data.length>0" v-else class="btn" @click="addAddress">add new address</div>
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import { getMyAddress ,postDefaultAddress,postDelAddress} from "@/api/my/userInfo";
import { Loading,Dialog  ,Toast,List,} from 'vant';

export default {
    name:'addressList',
    components:{
        [Dialog .name]: Dialog ,
        [List .name]: List ,
        [Loading .name]: Loading ,
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           userId:0,//用户id 
           id:0,//当前订单id 
           checked:0,//当前选中的地址项
           offset:50,//多大距离触发滚动
           finished: false,//是否加载完整
           data:[],
           orderType:0,//类型 购买或置换 1购买2置换
           isCheck:false,//是否一开始检查滚动 
           loading:false,//loading
           title:'',//弹出标题
           msg:'',//弹出提示
           confirm:"确认",
           cancel:"取消",
           salesData:'',//选择的数据
        }
    },
    //实例创建完成后被立即调用
    created (){
         //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
            if(this.lang == 'zh'){
                this.title = "确认删除地址吗？";
                this.msg = "地址一旦删除不可恢复！";
            }else{
                this.title = "Confirm the deletion of the address?";
                this.msg = "Once the address is deleted, it cannot be recovered!";
                this.confirm = "confirm";
                this.cancel = "cancel";
            }
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
              //获取地址列表
              this.getList();
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
        this.orderType = this.$route.query.orderType;//订单类型
        this.id = this.$route.query.id;//订单id
        if(window.localStorage.getItem("selectedData") && window.localStorage.getItem("selectedData").length>0){
            this.salesData = JSON.parse(window.localStorage.getItem("selectedData"));//选中的数据
        }
    },
    //
    methods:{
        //获取地址列表
        getList(){
            getMyAddress(this.userId).then(res => {
                console.log(res);
                if(res.code == 200){
                    let data = res.data;
                     //判断有没有数据了
                    if(data.length>0){//有数据
                        this.data = this.data.concat(data);
                        this.loading = false;
                    }else{//没有数据
                        this.finished = true;
                        this.loading = false;
                    }
                    this.loading = false;
                }else {
                    Toast(res.msg)
                }
            }); 
        },
        //滚动加载数据
        listRoll() {
            let _this = this;
            _this.pageIndex++;
            _this.getList();
        }, 
        //编辑
       Edit(idx){
            let _idx = idx;//地址下标
            // this.$router.push({path: '/addAddress', query: {id:this.id,type:2,lang:this.lang,userId:this.userId,orderType:this.orderType,idx:_idx}});
            let para = {};
            if(this.lang == 'zh'){
                para.title = "编辑地址";
            }else{
                para.title = "edit address";
            }
            para.url = "/addAddress?type=2&lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType+"&idx="+_idx;
            this.interaction.hLink(para);
        },
        //显示删除删除地址
        Delete(id) {
            let _id = id;
            let _this = this;
           
            Dialog.confirm({
                title: _this.title,
                message:_this.msg,
                confirmButtonText:_this.confirm,
                cancelButtonText:_this.cancel
            }).then(() => {
            // on confirm
                postDelAddress(_id,_this.lang).then(res => {
                if(res.code == 200){
                    Toast(res.msg);
                    setTimeout(function(){
                        _this.data = [];//清空数据
                        _this.getList();
                    },2300)
                }else {
                    Toast(res.msg);
                }
            }); 
            }).catch(() => {
            // on cancel
            });
        },
        //点击地址切换选中项
        tabs(index){
            let _this = this ;
            
            console.log("选中了",index);
            //跳转到购买或置换页面
            // this.$router.push({path: '/subBuy', query: {id:this.id,orderType:this.orderType,lang:this.lang,userId:this.userId,idx:index}});
            let para = {};
            if(this.lang == 'zh'){
                para.title = "提交信息";
            }else{
                para.title = "Submit Information";
            }
            // debugger;
            console.log(this.salesData)
            if(this.salesData && this.salesData.length >0){
                para.url = "/subBuy?lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType+"&idx="+index+"&isSelected=true";
            }else{
                para.url = "/subBuy?lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType+"&idx="+index;
            }
            console.log(para);
            _this.interaction.hLink(para);
           
        },
        //设置默认地址
        selected(index,id){
            let _id = id;
            postDefaultAddress(this.userId,_id,this.lang).then(res => {
                if(res.code == 200){
                    Toast(res.msg);
                     this.checked = index;
                }else {
                    Toast(res.msg);
                }
            }); 
        },
        //添加新地址
        addAddress(){
            // this.$router.push({path: '/addAddress', query: {id:this.id,type:1,lang:this.lang,userId:this.userId,orderType:this.orderType}});
            let para = {};
            if(this.lang == 'zh'){
                para.title = "新增地址";
            }else{
                para.title = "add address";
            }
            para.url = "/addAddress?type=1&lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType;
            this.interaction.hLink(para);
        },
    }
    
}
</script>

<style lang="stylus" scoped>
.adderss-box{
  .list{
      padding :0 .266667rem;
      margin-bottom :.186667rem;
      background :#fff;
      position:relative;
      dl{
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#494949;
        padding :.266667rem 0;  
        line-height :.533333rem;
        border-bottom: 1px solid #f1f1f1;
        dd{
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#9b9b9b;
            margin-top :.106667rem;
        }
      }
    //底部
    .bottom{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#cb9c57;
        padding :.266667rem 0;
        position:relative;
        height:.533333rem;
        line-height :.533333rem;
      
        .left{
            padding-left :.666667rem;
            width :30%;
            i{
                display:inline-block;
                width:16px;
                height:16px;
                background :url("http://img.xianyufanshen.net//address/image/weixuanzhong_dizhi@2x.png") no-repeat;
                background-size :100%;
                position:absolute; 
                top:50%;
                left :0;
                margin-top:-8px;
                &.active{
                    background :url("http://img.xianyufanshen.net//address/image/xuanzhong_dizhi@2x.png") no-repeat;
                    background-size :100%;
                }
            }
        }
      
        .btn-box{
            position:absolute; 
            right:0;
            height :.533333rem;
            top:50%;
            margin-top :-.266667rem;
            span{
                margin-left :.8rem;
                float:left;
                &.delete{
                    color:#eb3148;
                }
            }
        }
    }   
  }
  .noadderss-box{
    padding-top :2.933333rem;
    text-align:center;
    img{
        width:3.2rem;
        height:3.2rem;
        margin :0 auto;
    }
    p{
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#a2a2a2;
        letter-spacing:.0048rem;
        margin-top :.373333rem;
        margin-bottom:.8rem;
    }
    .btn-add{
        border:2px solid #cb9c57;
        border-radius:100px;
        width:6.426667rem;
        height:.96rem;
        line-height :.96rem;
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin :0 auto;
    }
  }
  .btn{
    background:#ffffff;
    width:100%;
    position:fixed;
    bottom:0;
    height:1.2rem;
    line-height :1.2rem;
    font-family:PingFangSC-Medium;
    font-size:.4rem;
    color:#cb9c57;
    letter-spacing:0.21px;
    text-align:center;
  }
}
</style>



